import { ProForm } from '@ant-design/pro-components';
import { PlusOutlined } from '@ant-design/icons';

import { useState, useRef, useEffect } from "react"
import { isUserExist } from "@/services/user"
import {
    Col,
    Form,
    Image,
    Input,
    Radio,
    Row,
    Space,
    Upload,
    message,
} from 'antd';

export default function UserForm(props) {
    const formRef = useRef()
    const [imageUrl, setImageUrl] = useState('')
    const type = props.type
    function handleAvatarChange(target) {
        console.log(target)
        if (target.file.status === 'done' && target.file.response.data) {
            // 成功上传
            setImageUrl(target.file.response.data)
        }
    }
    useEffect(() => {
        // 设置表单初始值
        formRef.current.setFieldsValue(props.initData);

    }, [props.initData])
    function handleFromFinish(tar) {
        // 提交的时候首先看一看有没有修改头像
        let submitTar = { ...formRef.current.getFieldsFormatValue() }
        if (imageUrl !== '') {
            // 修改了头像
            submitTar.avatar = imageUrl
        }
        // 对初始值进行覆盖
        submitTar = Object.assign({}, props.initData, submitTar)
        console.log(submitTar, "要提交的对象")
        props.submit(submitTar)
    }
    function validateLoginId(id) {
        // 判断当前的id 是否存在 如果存在不能新增
        if(type==='edit'){
            return Promise.resolve()
        }
        return isUserExist(id).then((res) => {
            console.log(res)
            if (res.data) {
                // 已经存在了
                return Promise.reject('账号已经存在!')
            }
            Promise.resolve()
        })
    }
    const uploadButton = (
        <div>
            {<PlusOutlined></PlusOutlined>}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                头像可选
          </div>
        </div>
    );
    return (
        <>
            <ProForm
                formRef={formRef}
                onFinish={handleFromFinish}
                submitter={{
                    render: (props, doms) => {
                        return (
                            <Row>
                                <Col span={16} offset={2}>
                                    <Space>{doms}</Space>
                                </Col>
                            </Row>
                        );
                    },
                }}
                layout="horizontal"
                labelCol={{
                    span: 2,
                }}
                wrapperCol={{
                    span: 16,
                }}
            >
                <Form.Item
                    label="登录账号"
                    name="loginId"
                    validateFirst={true}
                    validateTrigger="onBlur"
                    rules={[
                        {
                            required: true,
                            message: '请输入登录账号',
                        },
                        {
                            max: 10,
                            min: 4,
                            message: '长度在4-10之间',
                        },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                return validateLoginId(value);
                            },
                        }),
                    ]}
                >
                    <Input disabled={type === 'add' ? false : true} />
                </Form.Item>
                <Form.Item
                    label="登录密码"
                    name="loginPwd"
                    rules={
                        type === 'edit'
                            ? [
                                {
                                    required: true,
                                    message: '请输入登录密码',
                                },
                            ]
                            : null
                    }
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    label="用户昵称"
                    name="nickname"
                    rules={
                        type === 'edit'
                            ? [
                                {
                                    required: true,
                                    message: '请输入昵称',
                                },
                            ]
                            : null
                    }
                >
                    <Input />
                </Form.Item>
                {props.type === 'edit' ? (
                    <Form.Item label="当前头像">
                        <Image width={100} src={props.initData.avatar} />
                    </Form.Item>
                ) : null}
                <Form.Item label="用户头像">
                    <Upload
                        showUploadList={false}
                        onChange={handleAvatarChange}
                        className="avatar-uploader"
                        listType="picture-card"
                        action="/api/upload"
                        maxCount={1}
                    >
                        {imageUrl !== '' ? (
                            <img
                                src={imageUrl}
                                alt="avatar"
                                style={{
                                    width: '100%',
                                }}
                            />
                        ) : (
                            uploadButton
                        )}
                    </Upload>
                </Form.Item>
                <Form.Item
                    label="用户邮箱"
                    name="mail"

                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="QQ号码"
                    name="qq"

                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="微信号"
                    name="wechat"

                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="自我介绍"
                    name="intro"

                >
                    <Input.TextArea />
                </Form.Item>
            </ProForm>
        </>
    )
}